<template>
  <div>
    <van-nav-bar title="我的诉求" left-text="返回"  left-arrow @click-left="back"/>

    <van-form @submit="onSubmit">
  <van-field v-model="appealCategoryId" name="appealCategoryId" label="所属诉求分类ID" placeholder="所属诉求分类ID" :rules="[{ required: true, message: '请填写所属诉求分类ID' }]"/>
  <van-field v-model="title" name="title" label="诉求标题" placeholder="诉求标题" :rules="[{ required: true, message: '请填写诉求标题' }]"/>
  <van-field v-model="content" name="content" label="诉求内容" placeholder="诉求内容" :rules="[{ required: true, message: '请填写诉求内容' }]"/>
  <van-field v-model="undertaker" name="undertaker" label="承办单位" placeholder="承办单位" :rules="[{ required: true, message: '请填写承办单位' }]"/>
  <van-field name="imgUrl" label="文件上传">
    <template #input>
      <van-uploader v-model="imgUrl" />
    </template>
  </van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
    

    <ul>
        <li v-for="item in data" :key="item.id">
          <img :src="'http://124.93.196.45:10001/' + item.imgUrl" alt="">
           <div class="content">
            <h5>{{item.title}}-{{item.appealCategoryName}}</h5>
          <p>{{item.content}}</p>
          <p>{{item.undertaker}}</p>

          </div>
        </li>
        
    </ul>

  </div>
</template>

<script>
import {governmentget,governmentlist} from "./Service"
import mixin from  "@/mixin/flag";

export default {
    data(){
        return {
          appealCategoryId:'',
          title:'',
          content:'',
          undertaker:'',
          imgUrl:[{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],  
          data:[],       
        }
    },
    mixins:[mixin],
    methods:{
        back(){
            this.$router.go(-1);
        },
        async onSubmit(){
          let res = await governmentget({
            appealCategoryId:this.appealCategoryId,
            title:this.title,
            content:this.content,
            undertaker:this.undertaker,
            imgUrl:this.imgUrl.url,  
          })
          console.log(res);
          this.list=res.data.rows;
          this.listdata();
          this.appealCategoryId=''
          this.title=''
          this.content=''
          this.undertaker=''
        },
        async listdata(){
          let res = await governmentlist();
          console.log(res);
          this.data=res.data.rows
        }
        
    },
    created(){
      this.listdata()
    }
    
}
</script>

<style lang="scss" scoped>
 
  ul{  
    padding: 10px 15px;
    li{
        width:100%;
        height: 100px;
        margin-bottom: 20px;
        display: flex;
        img{
            width: 100px;
            height: 100px;

        }
        .content{
          flex:1;
          font-size: 14px;
          margin-left: 15px;
          h5{
            font-size: 16px;
            font-weight: bold;
            line-height: 26px;
            margin-bottom: 10px;
          }
          p{
            margin-bottom: 10px;
          }
        }
    }
  }
</style>